Layouts

Load cuxfilter and data

[1]:

from cuxfilter import charts
import cuxfilter
from bokeh import palettes
cux_df = cuxfilter.DataFrame.from_arrow('../../../data/146M_predictions_v2.arrow')

Declare charts

[2]:

#tile provider for choropleth map
chart0 = charts.choropleth(x='zip', y='delinquency_12_prediction', color_column='delinquency_12_prediction', color_aggregate_fn='mean',
                                  geo_color_palette=palettes.Purples9,
                                  geoJSONSource = 'https://raw.githubusercontent.com/rapidsai/cuxfilter/GTC-2018-mortgage-visualization/javascript/demos/GTC%20demo/public/data/zip3-ms-rhs-lessprops.json',
                                  data_points=1000, nan_color='white')
chart1 = charts.bar('dti')
chart2 = charts.bar('delinquency_12_prediction')
chart3 = charts.line('borrower_credit_score',step_size=1)
chart4 = charts.bar('seller_name',data_points=100)
chart5 = charts.line(x='loan_id',y='current_actual_upb')
chart6 = charts.line('dti')
chart7 = charts.line('delinquency_12_prediction')
chart8 = charts.bar('borrower_credit_score', data_points=100)
chart_widget = charts.multi_select('dti')

#create a list of charts
charts_list = [chart_widget, chart0, chart3, chart1, chart2, chart4, chart5, chart6, chart7, chart8]

Layout Types

1. Single feature

2d4aa7656a734f2e89c89855a7785a9f

[3]:

d = cux_df.dashboard(charts_list, layout=cuxfilter.layouts.single_feature, theme=cuxfilter.themes.rapids, title="Layout - single feature")
await d.preview()
../_images/layouts_Layouts_8_2.png

2. Feature and base

a2ff289126e540469e61c554e174ff23

[4]:

d = cux_df.dashboard(charts_list, layout=cuxfilter.layouts.feature_and_base, theme=cuxfilter.themes.rapids, title="Layout - feature and base")
await d.preview()
../_images/layouts_Layouts_11_2.png

3. Double feature

263b5cd46c6f426ba5263a568b539631

[5]:

d = cux_df.dashboard([chart_widget, chart0, chart1], layout=cuxfilter.layouts.double_feature, theme=cuxfilter.themes.rapids, title="Layout - double feature")
await d.preview()
../_images/layouts_Layouts_14_2.png

4. Left feature right double

d44974c8a488485dab5bb4f6e4a9bc3a

[6]:

d = cux_df.dashboard(charts_list, layout=cuxfilter.layouts.left_feature_right_double, theme=cuxfilter.themes.rapids, title="Layout - left feature right double")
await d.preview()
../_images/layouts_Layouts_17_2.png

5. Triple feature

af537a2b3ebb42ac98645e54209aea74

[7]:

d = cux_df.dashboard([chart_widget, chart1, chart2, chart3], layout=cuxfilter.layouts.triple_feature, theme=cuxfilter.themes.rapids, title="Layout - triple feature")
await d.preview()
../_images/layouts_Layouts_20_2.png

6. Feature and double base

9a587eb05a66414b9e2c1d9afc35ddd5

[8]:

d = cux_df.dashboard([chart_widget, chart0, chart2, chart3], layout=cuxfilter.layouts.feature_and_double_base, theme=cuxfilter.themes.rapids, title="Layout - feature and double base")
await d.preview()
../_images/layouts_Layouts_23_2.png

7. Two by two

cd1adc5412f3403fa7c27e3fa33c8687

[9]:

d = cux_df.dashboard([chart_widget, chart0, chart2, chart3, chart4], layout=cuxfilter.layouts.two_by_two, theme=cuxfilter.themes.rapids, title="Layout - two by two")
await d.preview()
../_images/layouts_Layouts_26_2.png

8. Feature and triple base

ccc96e78142a45f2a8c1ef8dbb69c415

[10]:

d = cux_df.dashboard(charts_list, layout=cuxfilter.layouts.feature_and_triple_base, theme=cuxfilter.themes.rapids, title="Layout - feature and triple base")
await d.preview()
../_images/layouts_Layouts_29_2.png

9. Feature and quad base

b717e989844944fa9fb1486e5ab62e39

[11]:

d = cux_df.dashboard(charts_list, layout=cuxfilter.layouts.feature_and_quad_base, theme=cuxfilter.themes.rapids, title="Layout - feature and quad base")
await d.preview()
../_images/layouts_Layouts_32_2.png

10. Feature and five edge

9dced98a9d6d4176b1c6c23494b75313

[12]:

d = cux_df.dashboard(charts_list, layout=cuxfilter.layouts.feature_and_five_edge, theme=cuxfilter.themes.rapids, title="Layout - feature and five edge")
await d.preview()
../_images/layouts_Layouts_35_2.png

11. Two by three

e04bf15dac8645feb2b70d8c92789667

[13]:

d = cux_df.dashboard([chart_widget, chart3, chart1, chart2, chart4, chart5, chart6], layout=cuxfilter.layouts.two_by_three, theme=cuxfilter.themes.rapids, title="Layout - two by three")
await d.preview()
../_images/layouts_Layouts_38_2.png

12. Double feature quad base

c9aacdce860748ec9b48e2ba10ddf9a6

[14]:

d = cux_df.dashboard(charts_list, layout=cuxfilter.layouts.double_feature_quad_base,
                     theme=cuxfilter.themes.rapids, title="Layout - double feature quad base")
await d.preview()
../_images/layouts_Layouts_41_2.png

13. Three by three

17a49deb0ea84b0ba949bff11205656d

[15]:

d = cux_df.dashboard(charts_list[2:], layout=cuxfilter.layouts.three_by_three,
                     theme=cuxfilter.themes.rapids, title="Layout - three by three")

[16]:

await d.preview()
../_images/layouts_Layouts_45_0.png